#lblCity, #lblCity2 {
     color: white;
     text-align: center;
     font-weight: bold;
     font-size: 32px;
     margin-left: 8px;
     margin-top: 4px;
    }
	
   #liste {
        width: 40%;
        height: 280px;
        margin: auto;
        background: beige;
		color: darkblue;
		font-weight: bold;
		font-size: 20px;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        overflow-y: auto;
		scrollbar-color: white grey;
        scrollbar-width: thin;
        scroll-behavior: smooth;
		background: rgba(255, 250, 250,.9);
    }


    #btnQui, #btnInfos, #btnQuestions, #btnChartre, #btnResa, #btnResa2 {
	 position: absolute;
      padding: 5px 15px;
      font-size: 14px;
	  line-height: 11px;
	  width: 230px;
	  height: 28px;
	  left: 210px;
      color: white;
      background: linear-gradient(90deg, #C71585, rgb(76,12,46), rgb(100,44,100));
      border: none;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 2px 2px rgba(255,255,255,0.4);
      transition: all 0.3s;
    }
	
	#btnDem, #btnDem2 {
	  position: absolute;
      padding: 5px 15px;
      font-size: 14px;
	  line-height: 11px;
	  width: 230px;
	  height: 28px;
	  top: 60px;
	  left: 50px;
      color: white;
      background: linear-gradient(90deg, #C71585, rgb(76,12,46), rgb(100,44,100));
      border: none;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 2px 2px rgba(255,255,255,0.4);
      transition: all 0.3s;
    }
	
	#btnAccueil, #btnAccueil2 {
	  position: absolute;
      padding: 3px 15px;
      font-size: 14px;
	  line-height: 11px;
	  height: 28px;
	  top: 20px;
	  left: 30px;
      color: rgb(100,44,100);
      background: beige;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 2px 2px rgba(255,255,255,0.4);
      transition: all 0.3s;
    }
	
	#btnResa {
	   top: 50px;
    }
	
	 #btnResa2 {
	   top: 85px;
    }
	
	 #btnInfos {
	   top: 120px;
    }
	
	 #btnQui{
	   top: 155px;
    }
	
	#btnQuestions {
	   top: 190px;
    }
	
	#btnChartre {
	   top: 225px;
    }

	#btnResa:hover, #btnResa2:hover{
      transform: scale(1.04);
    }	
	#btnQui:hover, #btnInfos:hover, #btnQuestions:hover, #btnChartre:hover{
      transform: scale(1.04);
	  font-size: 16px;
    }	

  .Class3D {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
#ImgDetente{
  position: absolute;
  bottom: 70px;
  right: 50px;
  width: 250px;
  height: 300px;
  border-radius: 15px;
  box-shadow: 0 0 20px beige;
}

#DivOne{
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
z-index: 20;
}

#DivTwo{
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
z-index: 40;
}

#DivThree{
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
z-index: 60;
}

#DivResult{
z-index: 999;
}
#BtnRecord{
z-index: 999;
}

#DivHome{
position: absolute;
top: -70px;
left: 20px;
z-index: 900;
}


#DivShow{
position: absolute;
bottom: 60px;
left: 30px;
padding: 20px;
width: 370px;
height: 510px;
border-radius: 20px;
background: linear-gradient(60deg, rgba(76,12,46,.45), rgba(100,44,100,.45));
border: 2px solid grey;
box-shadow: 0 0 20px beige;
overflow: hidden;
z-index: 900;
}

#BoxInfos, #BoxQui, #BoxQues, #BoxChar{
position: absolute;
top: 140px;
left: 520px;
padding: 20px;
width: 540px;
height: 520px;
border-radius: 50px;
background: linear-gradient(60deg, rgba(76,12,46,.3), rgba(100,44,100,.3));
border: 2px solid grey;
box-shadow: 0 0 20px beige;
overflow: hidden;
z-index: 999;
}

#DivDemande{
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
z-index: 100;
}

#DivInfos{
position: absolute;
width: 480px;
height: 560px;
margin-top: 150px;
left: 500px;
overflow: hidden;
border-radius: 20px;
background: rgba(255,255,255,.9);
box-shadow: 5px 5px silver;
overflow: hidden;
transition: 0.4s;
z-index: 300;
}
#ImgInfos{
position: absolute;
top: 20%;
left: 0px;
width: 100%;
height: 60%;
opacity: .15;
cursor: pointer;
z-index: 400;
}

#DivBox{
position: absolute;
top: -20px;
left: 520px;
z-index: 990;
}

#DivBoxShow{
position: absolute;
top: 20px;
left: 10px;
width: 94.2%;
height: 92%;
background: none;
overflow-y: auto;
overflow-x: hidden;
scrollbar-color: rgb(76,12,46) white;
scrollbar-width: thin;
transition: 0.4s;
z-index: 990;
}

#LblCovoit{
position: absolute;
top: 5px;
left: 120px;
color: white;
font-size: 20px;
z-index: 999;
}

    #info {
        text-align: center;
        margin: 10px;
		padding: 10px;
        font-size: 22px;
        font-weight: bold;
        color: #0000CD;
		background: rgba(255, 250, 250,.4);
		border-radius: 15px;
		width: 40%;
    }

h4{
	 margin-top: 1px;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
h3{
 margin-top: 1px;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
strong{
 font-size: 18px;
}

.quote-wrapper {
  width: 200px;
  height: 230px;
  position: relative;
  margin: 10vh auto 0;
}

.text {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0,0,255,.1);
  position: relative;
  margin: 0;
  color: white;
}

.text p {
  height: 100%;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

.text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
  );
  shape-margin: 7%;
}

.quote-wrapper::before {
  font-size: 270px;
  height: 82px;
  line-height: 0.78;
  line-height: 1;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
  font-family: sans-serif, serif;
  color: #ccc;
  opacity: 0.9;
}

.ClassDiv{
width: 97%;
height: 160px;
margin-top: 20px;
margin-left: 2%;
overflow: hidden;
border-radius: 20px;
background: white;
margin-bottom:10px;
box-shadow: 3px 3px silver;
overflow: hidden;
z-index: 100;
}

.ClassImg2{
position: absolute;
margin-top: 30px;
left: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 900;
}

.ClassImg3{
position: absolute;
margin-top: 70px;
left: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 900;
}

    .item {
        padding: 10px;
        border-bottom: 2px solid #D2B48C;
        cursor: pointer;
    }

    .item:hover {
        background: rgba(64, 224, 208, .5);
    }

    .item.active {
        background: #cceeff;
        font-weight: bold;
    }

.ClassBtnClose{
 width: 38px;
 height: 38px;
 box-shadow: 2px 2px silver;
 border-radius: 50%;
}

.ClassBtnClose2{
position: absolute;
 right: 20px;
 top: 20px;
 width: 38px;
 height: 38px;
 box-shadow: 2px 2px silver;
 border-radius: 50%;
}

.ClassLabel{
position: absolute;
margin-top: 8px;
left: 160px;
color: rgb(76,12,46);
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25);
z-index: 900;
}

.ClassLabel2{
position: absolute;
margin-top: 113px;
left: 70px;
font-size: 16px;
color: rgb(76,12,46);
font-weight: bold;
z-index: 900;
}

.ClassLabel3{
position: absolute;
margin-top: 113px;
left: 280px;
font-size: 16px;
color: rgb(76,12,46);
font-weight: bold;
z-index: 900;
}

.ClassLabel4{
position: absolute;
margin-top: 35px;
left: 70px;
width: 70%;
font-size: 14px;
height: 30px;
line-height: 12px;
color: rgb(76,12,46);
font-weight: bold;
overflow: hidden;
background: none;
z-index: 900;
}

.ClassLabel5{
position: absolute;
margin-top: 75px;
left: 70px;
width: 70%;
font-size: 14px;
height: 30px;
line-height: 12px;
color: rgb(76,12,46);
font-weight: bold;
overflow: hidden;
background: none;
z-index: 900;
}

.ClassClick{
  position: absolute;
  margin-top: 0px;
  left: 8px;
  width: 96%;
  height: 160px;
  border-radius: 20px;
  background: deeppink;
  cursor: pointer;
  opacity: 0;
  z-index: 999;
}